import React, { useState } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './CampusCardBind.module.css';

function CampusCardBind() {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  
  const onFinish = async (values) => {
    console.log('表单提交:', values);
    
    setLoading(true);
    
    try {
      // 模拟绑定过程
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      Toast.show({
        content: '校园卡绑定成功！',
        duration: 2000,
      });
      
      // 保存绑定状态到本地存储
      localStorage.setItem('campusCardBound', 'true');
      localStorage.setItem('campusCardNumber', values.cardNumber);
      localStorage.setItem('campusCardBalance', '200.00');
      
      // 延迟跳转到绑定成功页面
      setTimeout(() => {
        navigate('/campus-card-bound');
      }, 2000);
    } catch (error) {
      console.error('绑定校园卡错误:', error);
      Toast.show({
        content: '绑定失败，请重试',
        duration: 2000,
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate('/layout/home')} className={styles.navBar}>绑定校园卡</NavBar>
      
      <div className={styles.content}>
        <div className={styles.schoolInfo}>
          <h2>武汉大学</h2>
          <p className={styles.tip}>绑定后校园卡余额将与云缴费饭卡余额实时同步</p>
        </div>
        
        <Form
          form={form}
          layout='vertical'
          onFinish={onFinish}
          footer={
            <Button 
              block 
              type='submit' 
              color='primary' 
              size='large' 
              className={styles.submitBtn}
              loading={loading}
            >
              {loading ? '绑定中...' : '提交'}
            </Button>
          }
        >
          <Form.Item
            name='cardNumber'
            label='校园卡号'
            rules={[
              { required: true, message: '请输入校园卡号' },
              { pattern: /^\d{10,20}$/, message: '请输入正确的校园卡号' }
            ]}
          >
            <Input placeholder='请输入校园卡号' />
          </Form.Item>
          
          <Form.Item
            name='password'
            label='校园卡密码'
            rules={[
              { required: true, message: '请输入校园卡密码' },
              { min: 6, message: '密码至少6位' }
            ]}
          >
            <Input type='password' placeholder='请输入校园卡密码' />
          </Form.Item>
        </Form>
        
        <div className={styles.notice}>
          <h4>绑定说明：</h4>
          <ul>
            <li>绑定后校园卡余额与云缴费饭卡余额将实时同步</li>
            <li>通过任一渠道充值，两个账户余额都会同步更新</li>
            <li>支持在线充值、自助机充值等多种方式</li>
            <li>如有疑问，请联系校园卡服务中心</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

export default CampusCardBind;